<template>
  <vue-scroll ref="scroll" :ops="ops" style="width: 100%; height: 100%">
    <slot />
  </vue-scroll>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { primaryColor } from '@/store/useSiteSettings'
export default defineComponent({
  name: 'SScroll',
  props: {
    x: {
      type: Boolean,
      default: false
    },
    y: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      ops: {
        scrollPanel: { scrollingX: this.x, scrollingY: this.y },
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, // 是否只有滚动的时候才显示滚动条
          background: primaryColor, // 滚动条颜色
          opacity: 0.5, // 滚动条透明度
          'overflow-x': 'hidden'
        }
      }
    }
  }
})
</script>
